import React from 'react';
import { DnFC, usePlugin, useNodeIdProps } from '@inbiz/react';
import { createBehavior, createResource, TreeNode } from '@inbiz/core';
import { defaultResource, defaultBehavior, pluginSchema } from '../schema';
import { withContainer } from '@common/materialsCommon/Container';
import { InbizMenu as Content, Plugin as MenuPlugin } from '../../preview/web';
import { Plugin } from '../locale';
import './index.less';

export const InbizMenu: DnFC<React.ComponentProps<any>> & {
  Plugin: React.ComponentProps<any>;
} = (props) => {
  const nodeId = useNodeIdProps();
  const plugin = usePlugin('InbizMenu.Plugin');
  const { showlogo, shrinkage, ...otherProps } = nodeId;
  return (
    <div {...otherProps} className={'inbiz-Menu'}>
      <Content {...props} plugin={plugin} />
    </div>
  );
};

InbizMenu.Plugin = withContainer(MenuPlugin);

const allowDrops = ['Message', 'PersonalInfo', 'Html', 'EformButton', 'SearchEngine'];
InbizMenu.Behavior = createBehavior(defaultBehavior, {
  name: 'InbizMenu.Plugin',
  selector: (node) => node.props['x-component'] === 'InbizMenu.Plugin',
  extends: ['Field'],
  designerProps: {
    draggable: false,
    cloneable: false,
    deletable: false,
    droppable: true,
    propsSchema: pluginSchema,
    // allowAppend: (target: TreeNode, sources?: TreeNode[]) => {
    //   const isAppend = allowDrops.includes(sources[0].props['x-component']);
    //   return isAppend;
    // },
    allowDrop: (node) => false,
  },
  designerLocales: Plugin,
});

InbizMenu.Resource = createResource(defaultResource);

export default InbizMenu
